<script setup lang="ts">
const props = defineProps({
	name: String,
	size: String,
	fontSize: String
});

function getDefaultChar(): string {
	if(props.name == undefined)
		return '';

	return (props.name as string)[0];
}

function getStyle() {
	let size = props.size??'36px';
	return {
		'width': size,
		'height': size,
		'border-radius': size
	}
}

function getFoutSize() {
	let fontSize = props.fontSize??'18px';
	return { 'font-size': fontSize };
}

function calculateClassByAscii() {
  let num = 0;
  if(props.name !=undefined && props.name != '') {
    let ascii = props.name.charCodeAt(0);
    num = ascii % 9;
  }
	switch(num) {
		case 0:
			return { color0: true };
		case 1:
			return { color1: true };
		case 2:
			return { color2: true };
		case 3:
			return { color3: true };
		case 4:
			return { color4: true };
		case 5:
			return { color5: true };
		case 6:
			return { color6: true };
		case 7:
			return { color7: true };
		case 8:
			return { color8: true };
		default:
			return { color0: true };
	}
}
</script>

<template>
<div class="default-avatar" :class="calculateClassByAscii()" :style="getStyle()">
	<span :style="getFoutSize()">{{ getDefaultChar() }}</span>
</div>
</template>

<style lang="scss">
@use "../../../assets/variable.scss" as variable;

.default-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	span {
		margin-top: -2px;
		color: #FFF;
	}

	&.color0 {
		background-color: variable.$blue-1;
	}
	&.color1 {
		background-color: variable.$sky-1;
	}
	&.color2 {
		background-color: variable.$green-1;
	}
	&.color3 {
		background-color: variable.$lime-1;
	}
	&.color4 {
		background-color: variable.$yellow-1;
	}
	&.color5 {
		background-color: variable.$orange-1;
	}
	&.color6 {
		background-color: variable.$red-1;
	}
	&.color7 {
		background-color: variable.$magente-1;
	}
	&.color8 {
		background-color: variable.$purple-1;
	}
}
</style>